<html> 	
<head> 
<title>PSO Editor</title> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<style type='text/css'>
form { 
	display: inline; 
}
.mininotice{ 
	display: inline; 
	font-size:10px;
}
.searchwindow{
	font-family:courier new;
	font-size:12px;
	border: 2px double #1020AF;
	background: white;
	position: absolute;
	top: 45%;
	left:40%
}
.hidden{
	visibility: hidden;
}
#menu_frame{
	font-family:courier new;
	font-size:12px;
	background: #BBBBBB;
	width: 270px;
}
</style>
<script type="text/javascript"> 
var screen_name = "canvas";
var _menu_is_hidden = true;
var frames = ["#menu_frame","#dood_frame","#tile_frame","#blck_frame"];
function showFrame(f){
	for (var i=0;i<frames.length;i++){
		if (f!=frames[i]){
			$(frames[i]).hide(500);
		}
	}
	$(f).show(500);
}
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}



exports = {};
</script> 
<script type="text/javascript" src="../data/commons/editor.js"></script> 
<script type="text/javascript" src="../data/commons/tiles.js"></script> 
</head>
<body onload="exports.init()"> 
<button onclick='showFrame("#menu_frame");'>Menu</button>
<button onclick='showFrame("#tile_frame");'>Edit Tiles</button>
<button onclick='showFrame("#dood_frame");'>Edit Doodads</button>
<br>

<canvas style="border: 1px solid;position: absolute;top: 0px;left: 25%" id="canvas" width="600" height="480"></canvas> 

<div id="menu_frame" >
	<p class="mininotice">(press another button to change frame)</p>
	<br><br>
	<center>Login Information</center>
	Username,Password:<br>
	<input id="username" type="text"><br>
	<input id="password" type="password"><br>
    <button id="button_login">Login</button>
	<center>Manage Map</center>
	<button id="button_savemap">Save Map</button>
	<button id="button_openmap">Open Map</button>
	<button id="button_maplist">List of Maps</button>
    <br/>
    Current Map: <span id="current_map"></span>
	
</div>
	
<div id="dood_frame">
	<b>Selected Doodad</b><br>
	(click folder button to change)<br>
	<img id="selected_dood" class="showsrc_onhover" src="../data/doodads/rock.png"></img>
	<img src='openicon.bmp' onclick='change_dood()'></img><br>
	<div id="dbg"></div>
</div>

<div id="tile_frame">
	<b>Selected Tileset</b><br>
	<span id="selectedTileset">openForest</span><br/>
    <b>Edit mode</b><br/>
    <button id="button_tileImages">Edit Tile Images</button>
    <button id="button_tileBlocks">Edit Blocking Tiles</button>
    <br/>
	<b>Tile Palette</b><br>
	(WASD to move around tileset)<br>
    <canvas style="border: 1px solid" id="tile_canvas" width="196" height="196"></canvas> 
	<div id="dbg"></div>
	<div id="tile_palette"></div>
</div>

<div id="doodsearcher" class='searchwindow'>
	<center style="background-color:#AAAAAA;border: 1px solid #DDDDDD">
		<div id='dood_search_header'></div><p class="mininotice">drag me!</p>
	</center>
	<hr>
	<form action='javascript:dood_search_search();'>
		<input id='dood_search_terms' type='text'>
	</form>
	<button onclick='dood_search_search()'>Search</button>
	<button onclick='dood_search_close()'>Close</button>
	<div id="dood_search_results" style="max-height: 300px;overflow: auto;"></div>
	<hr>
	<br><br>
	<button onclick='dood_search_close()'>Close</button>
</div>


<div id="mousehoverer"
	style="position:absolute; 
      border: 1px solid ; 
      background-color: #AAAAFF; 
      padding: 0px;
	  font: 11px courier-new;"
	>
</div>
Mouse Pos: <span id="MouseFollower"></span><br/>
Draw Time:<span id="DrawTime"></span><br/>
<span id="htmllog"></span>
<span id="htmllog2"></span>
<script type='text/javascript'>
$("#menu_frame").hide(0);
$("#tilesearcher").hide(0);
$("#doodsearcher").hide(0);
$("#tile_frame").hide(0);
$("#dood_frame").hide(0);
$("#mousehoverer").hide(0);

$(".showsrc_onhover").mousemove(function(e){
	$("#mousehoverer").show(0);
	var src = $(this).attr("src");
	src = src.substr(src.lastIndexOf("/"));
	$("#mousehoverer").html("src: "+src);
	$("#mousehoverer").css('top',e.pageY-$("#mousehoverer").height()-5);
	$("#mousehoverer").css('left',Math.max(0,e.pageX-$("#mousehoverer").width()/2));
	$("#zomglog").html(e.pageX+":"+e.pageY+":"+$("#mousehoverer").width()/2);
});
$(".showsrc_onhover").hover(function(){},function(){
	$("#mousehoverer").hide(0);
	$("#zomglog").html("mouseleft");
});
</script>

<center>
</center>
</body> 
 
</html> 

